/* 小拇指：little */
/* 无名指：ring */
/* 中指：middle */
/* 食指forefinger */
/* body 元素定义文档的主体。

body 元素包含文档的所有内容-->比如文本、超链接、图像、表格和列表等等 */
.keyboard{
    /* margin: 100px auto; */
    padding: 10px;
    width: 1000px;
    border: 5px solid #f00;
    border-radius: 10px;
}
.keyboard ul{
    display: flex;
    justify-content: space-between;
    /* 水平方向上，两端对齐，项目之间的间隔都相等 */
    margin: 7px;
}
.keyboard ul li{
    outline-width: 1px;
    /* 设置元素整个轮廓的宽度 */
    width: 50px;
    height: 50px;
    text-align: center;
    /* 文本对齐方式 */
    line-height: 50px;
    /* 文字垂直居中---值必须与height一致 */
    border-radius: 10px;
    letter-spacing: 1px;
    /* 属性增加或减少字符间的空白 */
    margin: 0.4em;
}
.keyboard ul .b,
.keyboard ul .a{
    width: 55px;
}
.keyboard ul .back{
    width:80px;
}
.keyboard ul .esc{
    width: 52px;
}
.keyboard ul .u{
    width: 42px;
}
.keyboard ul .tab{
    width: 65px;
}
.keyboard ul .caps,
.keyboard ul .enter{
    width: 80px;
}
.keyboard ul .delete,
.keyboard ul .insert,
.keyboard ul .prtsc{
    width: 60px;
}
.keyboard ul .shift{
    width: 100px;
}
.keyboard ul .little{
    background-color:rgb(14, 144, 224);
    border:2px solid  rgb(14, 144, 224);
}
/* 按键被选中的样式 */ 
.keyboard ul .little.selected{
    border: 2px solid rgb(14, 144, 224) ;
    background-color:transparent;
    /* transparent 透明*/
    color: rgb(14, 144, 224);
}
.keyboard ul .ring{
    background-color: rgba(252, 12, 12, 0.599);
    border:2px solid rgba(252, 12, 12, 0.599);
}
.keyboard ul .ring.selected{
    border: 2px solid rgba(252, 12, 12, 0.599) ;
    background-color:transparent;
    /* transparent 透明*/
    color: rgba(252, 12, 12, 0.599);
}
.keyboard ul .middle{
    background-color: rgb(15, 239, 228);
    border: 2px solid rgb(15, 239, 228);
}
.keyboard ul .middle.selected{
    border: 2px solid rgb(15, 239, 228) ;
    background-color:transparent;
    /* transparent 透明*/
    color: rgb(15, 239, 228);
}
.keyboard ul .forefinger1st{
    background-color: rgb(190, 13, 239);
    border: 2px solid rgb(190, 13, 239);
}
.keyboard ul .forefinger1st.selected{
    border: 2px solid rgb(190, 13, 239);
    background-color:transparent;
    /* transparent 透明*/
    color: rgb(190, 13, 239);
}
.keyboard ul .forefinger2nd{
    background-color: rgb(9, 235, 182);
    border: 2px solid rgb(9, 235, 182);
}
.keyboard ul .forefinger2nd.selected{
    border: 2px solid rgb(9, 235, 182);
    background-color:transparent;
    /* transparent 透明*/
    color: rgb(9, 235, 182);
}
.you{
    animation: you 2s infinite;
}
@keyframes you{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.5);
    }
    100%{
        transform: scale(1);
    }
}
.selected{
    animation: selected 0.8s infinite;
    /* animation:动画;selected:选择的动画名称; infinite:永久播放*/
}
/* 每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。 */
@keyframes selected{
    0%{
        /* 位置偏转translate 
        旋转 rotate(角度) 
        缩放 scale() 区间1不变*/
        transform: rotate(0deg);
    }
    20%{
        transform:  rotate(72deg) scale(1);
    }
    40%{
        transform:  rotate(144deg) scale(1.5);
    }
    60%{
        transform:  rotate(216deg) scale(2);
    }
    80%{
        transform:  rotate(288deg) scale(1.5);
    }
    100%{
        transform:  rotate(360deg) scale(1);
    }
}
/* 迷幻边框样式 */
.shadow{
    position: relative;
    /* 相对定位--父 */
    background: linear-gradient(to top,#000,#262626);
    /* 创建一个多种颜色线性渐变的图片。 */
    /* 盖得 */
}
/* 利用 :before 和 :after 添加背景，比如给一段文字前后打引号 */
.shadow::before,
.shadow::after{
    content: '';
    position: absolute;
    /* 觉对定位--子 */
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#fb0094,#00f,#0f0,#ff0,#f00,#fb0094,#00f,#0f0,#ff0,#f00);
    /* 线性渐变linear-gradient(方向：颜色,颜色,颜色……) */
    background-size: 400%;
    z-index: -1;
    /* 较大的元素会覆盖较小的元素在上层进行显示 */
    animation: animate 20s linear infinite;
    /* 图层层数---值越大，层次越高，值越小，层次越低 */
    background-position: 0% 0;
}

@keyframes animate{
    0%{
        background-position: 0 0;
    }
    50%{
        background-position: 300% 0;
    }
    100%{
        background-position: 0 0;
    }
}
/* filter定义元素（通常是 <img>）的视觉效果 */
.shadow::after{
    /* 模糊效果 */
    filter: blur(50px);
}
div {
    height: 400px;
    background: red;
    position: relative;
    animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 200px;
        top: 0px;
    }

    50% {
        left: 200px;
        top: 200px;
    }

    75% {
        left: 0px;
        top: 200px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}
